<template>
  <!-- 个人中心 -->
  <view class="containerPage">
    <!-- <u-navbar title="村社财务管理" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->

    <view class="content">
      <view class="userMsg">
        <view class="userName">
          <u--image class="image" radius="50%" :fade="false" width="134rpx" height="134rpx" :src="userInfoCopy.avatar" mode="aspectFill" />
          <span>{{ userInfoCopy.username || '' }}</span>
        </view>
        <view class="msg">管辖区域：{{ manageAreaList }}</view>
      </view>
      <view class="tabList">
        <view class="tabItem" @click="gotoJump('/pageContent/user/userInfo')">
          <view class="le">
            <!-- <user theme="outline" size="20" fill="#35353F" /> -->
            <span class="leSpan">个人信息</span>
          </view>
          <img class="outLeft" src="@/static/image/webApp/homeRight.png" alt="" />
        </view>
        <view class="tabItem" @click="gotoJump('/pageContent/user/password')">
          <view class="le">
            <!-- <u-icon name="lock-open" color="#35353F" size="20"></u-icon> -->
            <span class="leSpan">修改密码</span>
          </view>
          <img class="outLeft" src="@/static/image/webApp/homeRight.png" alt="" />
        </view>
        <view class="tabItem" @click="outLogin">
          <view class="le">
            <!-- <logout theme="filled" size="20" fill="#35353F" /> -->
            <span class="leSpan">退出登录</span>
          </view>
          <img class="outLeft" src="@/static/image/webApp/homeRight.png" alt="" />
        </view>
      </view>
    </view>

    <div style="width: 100%; height: 120rpx"></div>
    <div class="footerNav">
      <div class="navTab" @click="gotoJumpTab('/pageContent/finance/content')">
        <img src="https://ncn-static.oss-cn-shanghai.aliyuncs.com/SmallApp/sz-shouye.png?version=1" alt="" />
        <span class="c3">首页</span>
      </div>
      <div class="navTab" @click="gotoJumpTab('/pageContent/finance/home')">
        <img src="https://ncn-static.oss-cn-shanghai.aliyuncs.com/SmallApp/sz-wode-se.png?version=1" alt="" />
        <span>我的</span>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfoCopy: {},
      manageAreaList: '',
    }
  },
  mounted() {
    this.userInfoCopy = JSON.parse(uni.getStorageSync('dtUsersVo') || '{}')
    this.manageAreaList = uni.getStorageSync('manageAreaList')
  },
  methods: {
    gotoJumpTab(url) {
      if (url == '/pageContent/finance/home' && !uni.getStorageSync('accesstoken')) {
        url = uni.navigateTo({
          url: '/pages/login/login',
        })
        return
      }
      uni.redirectTo({
        url: url,
      })
    },
    gotoJump(url) {
      uni.navigateTo({
        url: url,
      })
    },
    // 退出登录
    outLogin() {
      uni.showModal({
        title: '提示',
        content: '确定需要退出登录吗？',
        success: function (res) {
          if (res.confirm) {
            setTimeout(() => {
              uni.clearStorageSync()
              uni.reLaunch({
                url: '/pages/login/login',
              })
              location.reload()
            }, 200)
          } else if (res.cancel) {
          }
        },
      })
    },
  },
}
</script>

<style lang="scss">
.containerPage {
  background-color: #f9f9f9;
  min-height: 100vh;
  .content {
    width: 100%;
    .userMsg {
      margin-bottom: 24rpx;
      padding: 32rpx;
      background-color: #fff;
      width: 100%;
      .userName {
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;
        .image {
          margin-right: 16rpx;
          border-radius: 50%;
          border: 1px solid #2c83e4;
        }
        span {
          font-size: 40rpx;
        }
      }
      .msg {
        font-size: 28rpx;
        color: #999999;
      }
    }
    .tabList {
      background-color: #fff;
      width: 100%;
      margin-bottom: 24rpx;
      .tabItem {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        height: 104rpx;
        justify-content: space-between;
        align-items: center;
        padding: 0 32rpx;
        border-bottom: 1px solid #e5e5e5;
        &:nth-last-child(1) {
          border: none;
        }
        .le {
          display: flex;
          align-items: center;
          .leImg {
            width: 72rpx;
            height: 72rpx;
            background-color: #e5e5e5;
            border-radius: 50%;
          }
          .leSpan {
            font-size: 28rpx;
          }
        }
        .outLeft {
          width: 38rpx;
          height: 38rpx;
          margin-left: 12rpx;
        }
      }
    }
  }
}
// 底部导航条
.footerNav {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  padding: 0 32rpx;
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.06);

  .navTab {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;

    img {
      width: 46rpx;
      height: 46rpx;
      margin-bottom: 4rpx;
    }

    span {
      font-size: 24rpx;
    }
  }
}
</style>